<template>
  <div class="container">

    <div class="row">
      <div class="col">
        <h1>首页</h1>
        <hr/>
      </div>
    </div>

    <div class="row d1">

      <div class="col">
        <div class="row border bg-light">
          <div class="col">
            <div class="row justify-content-end">
              <div class="col-3">
                <i class="fa fa-eye fa-4x"></i>
              </div>
            </div>
          </div>
          <div class="w-100"></div>
          <div class="col">
            <span class="display-4">浏览量</span>
          </div>
          <div class="w-100"></div>
          <div class="col">
            <span class="display-4">1246532</span>
          </div>
        </div>
      </div>

      <div class="col">
        <div class="row border bg-light">
          <div class="col">
            <div class="row justify-content-end">
              <div class="col-3">
                <i class="fa fa-file fa-4x"></i>
              </div>
            </div>
          </div>
          <div class="w-100"></div>
          <div class="col">
            <div class="row">
              <span class="display-4">订单量</span>
            </div>
          </div>
          <div class="w-100"></div>
          <div class="col">
            <div class="row">
              <span class="display-4">742</span>
            </div>
          </div>
        </div>
      </div>

      <div class="col">
        <div class="row border bg-light">
          <div class="col">
            <div class="row justify-content-end">
              <div class="col-3">
                <i class="fa fa-jpy fa-4x"></i>
              </div>
            </div>
          </div>
          <div class="w-100"></div>
          <div class="col">
            <span class="display-4">总金额</span>
          </div>
          <div class="w-100"></div>
          <div class="col">
            <span class="display-4">949233</span>
          </div>
        </div>
      </div>

    </div>











    <div class="row d2">
      <div class="col-8">
        <div class="row border">
          <div class="col duan1">
            <i class="fa fa-circle" aria-hidden="true"></i>
            <span> 待办事项</span>
          </div>
          <div class="w-100"></div>
          <div class="col">
            <div class="row align-items-center justify-content-center">
              <div class="col-1"><i class="fa fa-bookmark" aria-hidden="true"></i></div>
              <div class="col-9">
                <span>一种典型的俗手就是假先手，也就是把本方绝对先手的棋通通走完，表面看上去很主动，着着逼迫对方跟着走棋，但实际上减少了棋的变化，消除了劫材，往往于对方有利。</span>
              </div>
              <div class="col-2">
                <button class="btn btn-sm btn-outline-secondary">立即处理</button>
              </div>
            </div>
          </div>
          <div class="w-100"></div>
          <div class="col">
            <div class="row align-items-center justify-content-center">
              <div class="col-1"><i class="fa fa-bookmark" aria-hidden="true"></i></div>
              <div class="col-9">
                <span>俗手不同于恶手或臭棋，它不是因为计算失误而下出的明显错着，一般不会导致全局的崩溃。但是，如果业余棋手不在克服俗手方面下功夫，提高棋力是很难的。</span>
              </div>
              <div class="col-2">
                <button class="btn btn-sm btn-outline-secondary">立即处理</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="row border bg-light">

          <div class="col duan1">
            <i class="fa fa-circle" aria-hidden="true"></i>
            <span> 商品分类</span>
          </div>

          <div class="w-100"></div>

          <div class="col">
            <div id="myChart2"></div>
          </div>

        </div>
      </div>
    </div>











    <div class="row d3">

      <div class="col border">
        <div class="row">

          <div class="col duan1">
            <i class="fa fa-circle" aria-hidden="true"></i>
            <span> 上证指数</span>
          </div>

          <div class="w-100"></div>

          <div class="col" id="myChart1"></div>
        </div>

      </div>

    </div>
  </div>


</template>

<script>
module.exports = {
  mounted(){
    mychart();
  }
}
</script>

<style scoped>
.d1 > div {
  height: 250px;
  padding:0 30px;
}

.d1 > div > div {
  height: 230px;
}

.d2 > div {
  height: 300px;
  padding:0 30px;
}

.d2 > div > div {
  height: 300px;
}

.d3{
  height: 800px;
  padding:20px 15px;
}

.d3 > div {
  height: 800px;
}

.duan1 {
  font-size: 2em;
}

#myChart1 {
  width: 600px;
  height: 800px;
}

#myChart2 {
  width: 300px;
  height: 250px;
}

</style>